<template>
  <div class="my-completed-tasks-container">
    <el-card>
      <div slot="header">
        <span>已办任务</span>
      </div>
      
      <el-table :data="tasks" style="width: 100%">
        <el-table-column prop="instance.id" label="ID" width="80" />
        <el-table-column prop="instance.title" label="标题" show-overflow-tooltip />
        <el-table-column prop="instance.processName" label="流程名称" width="150" />
        <el-table-column prop="instance.applicantName" label="申请人" width="120" />
        <el-table-column prop="task.taskName" label="节点" width="150" />
        <el-table-column prop="task.status" label="处理结果" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.task.status === 'APPROVED' ? 'success' : 'danger'">
              {{ scope.row.task.status === 'APPROVED' ? '同意' : '拒绝' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="task.comment" label="审批意见" show-overflow-tooltip />
        <el-table-column prop="task.completeTime" label="处理时间" width="180">
          <template slot-scope="scope">
            {{ formatDate(scope.row.task.completeTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="viewDetail(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getMyCompletedTasks } from '@/api/approval'

export default {
  name: 'MyCompletedTasks',
  
  data() {
    return {
      tasks: []
    }
  },
  
  created() {
    this.loadTasks()
  },
  
  methods: {
    loadTasks() {
      getMyCompletedTasks().then(res => {
        this.tasks = res.data
      })
    },
    
    viewDetail(row) {
      this.$router.push(`/approval/detail/${row.instance.id}`)
    },
    
    formatDate(date) {
      if (!date) return ''
      const d = new Date(date)
      return d.toLocaleString('zh-CN')
    }
  }
}
</script>

<style scoped>
.my-completed-tasks-container {
  background: #fff;
  border-radius: 8px;
}
</style>

